﻿<UserControl x:Class="CitiSurface.VideoBarControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:s="http://schemas.microsoft.com/surface/2008"
             xmlns:cs="clr-namespace:CitiSurface"
             xmlns:fluid="clr-namespace:FluidKit.Controls;assembly=FluidKit"
             mc:Ignorable="d" x:Name="LayoutRoot"
             d:DesignHeight="400" d:DesignWidth="600" BorderThickness="5">
    <!-- Customized UserControl used to show the cover flow in the Control Panel -->
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CitiSurfaceDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Content="Videos"
                            Style="{StaticResource TileStyle}"/>

        <fluid:ElementFlow Grid.Row="1" x:Name="elementFlow"
                           ItemsSource="{Binding VideoItems}"
                           ItemTemplate="{DynamicResource VideoAndCaptionTemplate}"
                           TiltAngle="60"
                           ItemGap="0.25"
                           FrontItemGap="1"
                           PopoutDistance="0"
                           Background="Transparent"
                           TouchDown="ElementFlowTouchDown"
                           TouchMove="ElementFlowTouchMove"
                           TouchUp="ElementFlowTouchUp"
                           TouchLeave="ElementFlowTouchLeave"
                           SelectionChanged="ElementFlowSelectionChanged"
                           >
            <fluid:ElementFlow.Layout>
                <fluid:CoverFlow />
            </fluid:ElementFlow.Layout>
            <fluid:ElementFlow.Camera>
                <PerspectiveCamera FieldOfView="20"
                                   Position="0,0,6"
                                   LookDirection="0,0,-6" />
            </fluid:ElementFlow.Camera>
        </fluid:ElementFlow>
    </Grid>
</UserControl>
